<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="" href="../css/public.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/animate.min.css" />
</head>
<script src="../js/jquery.js"></script>

<body>
    <div id="wrap">
        <header>
            <div class="content">
                <ul class="fl">
                    <li><a href="../index.html" style="color: orangered;">91人气App(商家版)</a></li>
                    <li style="border: none;"><a href="">登录</a></li>
                </ul>
                <ul class="fr">
                    <li><a href="../index.html">欢迎使用91人气!</a></li>
                    <li><a href="regist.html">注册</a></li>
                    <li><a href="../index.html">返回首页</a></li>
                    <li><a href="">帮助中心</a></li>
                    <li style="border: none;"><a href="">联系客服</a></li>
                </ul>
            </div>
        </header>

        <div class="logo">
            <img src="http://s.91renqi.com/assets/4_0/img/logreg/logb2_03.png" />
        </div>
        <div class="login">
            <form action="">
                <ul>
                    <li>
                        <h2>用户登录<a>没有账号,立即注册 >></a></h2>
                    </li>
                    <li class="phone"><input type="text" name="" id="tel" value="" placeholder="昵称/手机号/邮箱" /><span style="color: red;">请输入有效的手机号码</span></li>
                    <li class="pass">
                        <input type="password" name="pass" id="pass" value="" placeholder="登录密码" />
                    </li>
                    <li class="yanzhen">
                        <input type="text" name="yanzhen" id="yanzhen" value="" placeholder="输入验证码" style="width: 111px;border-right: 1px solid black;" /><span style="font-size: 1.5rem;width: 2rem;text-align: center;">kwb5</span><button class="fresh"><img src="http://s.91renqi.com/assets/4_0/img/logreg/logicon_11.png"/></button>
                    </li>
                    <li style="color: white;font-size: 1.5rem;" class="rember">
                        <input type="checkbox" name="" id="" value="" style="vertical-align: -10px;margin-left: 0;" />记住密码下次登录
                    </li>
                    <li class="btn">
                        <button class="sub">登录</button>
                        <a href="">忘记密码?</a>
                    </li>
                </ul>
            </form>
        </div>
        <footer>
            <ul>
                <li>
                    <p>
                        <span>新人buff</span><br /> 新人体验礼，会员G币免费拿
                    </p>
                    <img src="http://s.91renqi.com/assets/4_0/img/logreg/logb2_07.png" hover="../img/logb3_07.png" sc="http://s.91renqi.com/assets/4_0/img/logreg/logb2_07.png" />
                </li>
                <li>
                    <p>
                        <span>合伙人buff</span><br /> 91募英才，首充返利+续费返利
                    </p>
                    <img src="../img/logb2_09.png" hover="../img/logb3_09.png" sc="../img/logb2_09.png" />
                </li>
                <li>
                    <p>
                        <span>活动buff</span><br /> 每天有福利，每月都惊喜。perfect！
                    </p>
                    <img src="../img/logb2_12.png" hover="../img/logb3_12.png" sc="../img/logb2_12.png" style="margin-left: 8px;" />
                </li>
            </ul>
        </footer>

    </div>
</body>
<script>
    $(function() {
        //根据浏览器高度设置wrap高度
        $('#wrap').css("height", window.innerHeight);

        //底部滑过事件
        $('footer li').each(function(i) {
                $('footer li').eq(i).mouseover(function() {
                    var $hover = $(this).find("img").attr("hover");
                    $(this).find("img").attr("src", $hover);
                }).mouseleave(function() {
                    var $sc = $(this).find("img").attr("sc");
                    $(this).find("img").attr("src", $sc);
                })
            })
            //form表单验证
        var regPass = /^\d{11}$/;
        var numArr = [];
        var zimu = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"]
        for (var i = 0; i < 9; i++) {
            numArr.push(i)
        }
        var yzArr = numArr.concat(zimu);
        var colorArr = ["red", "yellow", "blue", "green", "pink"];

        function rand(max, min) {
            return Math.floor(Math.random() * (max - min)) + min
        }
        $(".phone input").blur(function() {
            var val = $('.phone input').val();
            if (!regPass.test(val)) {
                $('.phone span').show();
            }
        });
        $(".phone span").click(function() {
            $(this).hide();
        });
        //提交
        $('.sub').click(function(e) {
            e.preventDefault();
            if ($('.phone span').hide() && $(".yanzhen input").val() == $(".yanzhen span").text()) {
                var username = $('input').eq(0).val();
                var password = $('input').eq(1).val();
                $.ajax({
                    type: "post",
                    url: "http://127.0.0.1:8000/login",
                    async: true,
                    data: {
                        username: username,
                        password: password
                    },
                    success: function(data) {
                        console.log(data);
                        if (data == "用户名不存在") {
                            alert("用户名不存在")
                        } else {
                            alert("登录成功");
                            window.localStorage["username"] = username;
                            window.localStorage["password"] = password;
                            window.sessionStorage["type"] = 1; //代表成功登录
                            //                          window.location.href = "http://www.hao123.com";
                            if (window.sessionStorage.type == 1) {
                                $("<div></div>").text("用户:" + window.localStorage.username + "已登录").css({
                                    "position": "fixed",
                                    "right": "3%",
                                    "top": "10px",
                                    "color": "pink"
                                }).appendTo($("body"));
                            };
                            if ($('input[type=checkbox]').prop("checked")) {
                                $('input').eq(0).val(window.localStorage.username);
                                $('input').eq(1).val(window.localStorage.password);
                            }
                        }
                    }
                });

            }
        });
        if (window.localStorage['username']) {
            $('input').eq(0).val(window.localStorage.username);
                                $('input').eq(1).val(window.localStorage.password);
        }
        $('.yanzhen .fresh').click(function(e) {
            e.preventDefault();
            var content = [];
            for (var i = 0; i < 4; i++) {
                var suiji = rand(yzArr.length, 0);
                content.push(yzArr[suiji])
            }
            var show = content.join("");
            $(this).prev().text(show).css("color", colorArr[rand(colorArr.length, 0)]);

        });
        //初始验证码
        $('.yanzhen span').text(function() {
            var content = [];
            for (var i = 0; i < 4; i++) {
                var suiji = rand(yzArr.length, 0);
                content.push(yzArr[suiji])
            }
            var show = content.join("");
            return show;
        })
    })
</script>

</html>